<!--
 * @Author: ly
 * @Date: 2021-10-25 11:22:58
 * @LastEditors: ly
 * @LastEditTime: 2021-11-04 14:18:23
 * @Description: 日志管理
-->

<template>
<div>
    <!-- 表格开始  -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="realname" label="访问人真实姓名" width="180">
        </el-table-column>
        <el-table-column prop="method" label="访问方式" width="180">
        </el-table-column>
        <el-table-column prop="content" label="访问路径" width="180">
        </el-table-column>
        <el-table-column prop="logTime" label="访问时间" width='180'>
            <!-- 进行时间格式转换 -->
            <template slot-scope="scope">
                {{moment(scope.row.orderTime).format('YYYY-MM-DD :HH:mm:ss')}}
            </template>
        </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="page">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
    <!-- 分页结束 -->
</div>
</template>

<script>
let moment = require('moment')
import {
    pageQuery
} from '@/api/log';
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            params: {
                page: 1,
                pageSize: 10,
            },
        }
    },
    created() {
        this.queryPage()
    },
    watch: {
        params: {
            handler() {
                this.queryPage();
            },
            deep: true
        }
    },
    methods: {
        //3.挂载moment
        moment,
        async queryPage() {
            let temp = {
                ...this.params,
            }
            let res = await pageQuery(temp); //调用api封装的方法
            console.log(res); //res是请求返回来的数据
            this.tableData = res.data.list;
            this.total = res.data.total;
        },
        // 处理每页显示的条数
        handleSizeChange(pageSize) {
            //   console.log(`每页 ${val} 条`);
            this.params.pageSize = pageSize;
            // this.queryPage();
            this.params.page = 1;
        },
        // 处理当前页
        handleCurrentChange(page) {
            //   console.log(`当前页: ${val}`);
            this.params.page = page;
            // this.queryPage();
        },

    },

}
</script>

<style lang="scss">

</style>
